<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getTitle, pageTitle, deleteTitle } from "../../../api/titleApi";
import { istoken } from "../../../api/api";
import { Upload, Plus } from '@element-plus/icons-vue'
import addData from "./upData/addData.vue";
import upData from "./upData/upData.vue";
const myData = ref('')
const item = ref(0)
const data = ref()
const FileData = ref()
const _id = ref('')
const page = ref(0)
const myupData = ref('')
const centerDialogVisible = ref(false)
const upTitleDialogVisible = ref(false)
const oldName = ref('')
//初始化数据
onMounted(async () => {
    is()
    const res = await getTitle()
    item.value = res.data.msg
    data.value = res.data.data
})
//判断登录
const is = async () => {
    const res = await istoken()
    if (res.data.code !== '200') {
        // 从localStorage中删除名为'token'的项
        localStorage.removeItem('token');
        localStorage.removeItem('mail');
    }
}
//删除操作
const handleDelete = async (row: { _id: string,title:string }) => {
    const res = await deleteTitle({ _id: row._id, page: page.value,oldName:row.title })
    if (res.data.code === '404') return alert(res.data.msg)
    item.value = res.data.msg
    data.value = res.data.data
}
//修改操作
const handleUp = async (row: { _id: string,title:string }) => {    
    upTitleDialogVisible.value = !upTitleDialogVisible.value
    _id.value = row._id
    oldName.value = row.title
}
//弹窗
const inFO = (e: boolean) => {
    centerDialogVisible.value = e;
}
const titleInFO = (e: boolean) => {
    upTitleDialogVisible.value = e;
}
//获取上传的文件
const change = async (e: any) => {
    FileData.value = e.raw;
}
//更新数据
const getNewData = (e: { code: string, data: {}, msg: number }) => {
    console.log(e.data);
    
    if (e.code !== '200') return alert(e.msg)
    item.value = e.msg
    data.value = e.data
}

const newtitleData = (e: { code: string, data: {}}) => {
    data.value = e
}
//切换页面
const getPage = async (e: number) => {
    page.value = e
    const res = await pageTitle({ page: page.value })
    data.value = res.data.data
}
</script>

<template>
    <!-- 修改按钮 -->
    <upData title="修改标题" :oldName :_id :myupData :page :upTitleDialogVisible @update:upTitleDialogVisible="titleInFO" @update:newtitleData="newtitleData">
        <el-form label-width="auto">
            <el-form-item label="请修改分类：">
                <el-input v-model="myupData" placeholder="修改分类名称" />
            </el-form-item>
        </el-form>
    </upData>
    <!-- 添加按钮 -->
    <addData title="添加分类" :FileData :myData :page :centerDialogVisible @update:newData="getNewData"
        @update:centerDialogVisible="inFO">
        <el-form label-width="auto">
            <el-form-item label="添加分类：">
                <el-input v-model="myData" placeholder="请输入分类" />
            </el-form-item>
            <!-- 上传图片 -->
            <el-form-item label="图片文件：">
                <el-upload action="#" :limit="1" list-type="picture-card" :on-change="change" :auto-upload="false">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
    </addData>
    <!--  -->
    <div class="data">
        <div class="input">
            <el-button type="primary" :icon="Upload"
                @click="centerDialogVisible = !centerDialogVisible">添加标题</el-button>
        </div>
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id" />
            <el-table-column label="标题" prop="title" />
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                    <el-button type="info" @click="handleUp(scope.row)">
                        修改标题
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination class="pageTop" @change="getPage" background layout="prev, pager, next" :total="item" />
        </div>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>